<template>
    <div class="attr">
        <attr-item  
            v-for='(item,index) in selectAttrs'
            :key='item._renderId'
            :renderId='item._renderId'
            :show-create-btn='index == 0'
            :show-delete-btn='index != 0'
            v-model='item.id'
            :selected-attrs='item.attrs'
            @add-attr='addAttr'
            @delete-attr='deleteAttr'
            ref="attrItem"
        ></attr-item>
    </div>
</template>

<script>
    import { nanoid } from 'nanoid';
    import attrItem from './attr-item.vue'
    import { mapState } from 'vuex'
    import {MAX_PRODUCT_ATTR_COUNT} from '@const';
    import {toast} from '@u'
    export default {
        components : {
            attrItem
        },
        props : {
            productInfo : {
                type : Object,
                default : _ => {}
            }
        },
        inject : ['parent'],
        data () {
            return {
                //已创建的规格
                selectAttrs : [],
            }
        },
        watch : {
            selectAttrs : {
                handler : function (n,o) {
                    if (n.some(item => item.id)) {
                        this.$store.commit('setSelectAttrIds', n.map(item => item.id));
                    }
                },
                deep : true
            },
            productInfo : {
                handler : function (n) {
                    if (n) {
                        this.selectAttrs = n.specs_select_json;
                        console.log('attr',this.selectAttrs);
                    }
                    
                },
                immediate : true
            }
        },
        computed : {
            ...mapState(['product']),
        },
        created () {
            let selectIds = this.product.selectAttrIds.filter(item => item > 0);
            this.selectAttrs = selectIds.length ? selectIds.map(v => {
                let c = this.product.attrTypeOptions.filter(item => item.id == v)[0];
                return {
                    _renderId : nanoid(),
                    id : v,
                }
            }) : [
                {
                    _renderId : nanoid(),
                    id : null,
                }
            ];
        },
        methods : {
            //添加规格
            addAttr () {
                if (this.selectAttrs.length >= MAX_PRODUCT_ATTR_COUNT) {
                    toast(`一个商品最多可添加${MAX_PRODUCT_ATTR_COUNT}个规格`, 'error');
                    return;
                }
                this.selectAttrs.push({
                    id : null,
                    _renderId : nanoid()
                });
            },
            //删除规格
            deleteAttr (renderId) {
                this.selectAttrs = this.selectAttrs.filter(item => item._renderId != renderId);
                this.$nextTick(_ => {
                    this.parent._reLoadTabelData();
                })
            },
            getAttrValues () {
                return this.selectAttrs.map((item,index) => {
                    item.attrs = this.$refs.attrItem[index].attrs;
                    return item;
                })
                
            }
        }
    }
</script>

<style lang='less' scoped>
    .attr {
        // background: #eee;
        padding: 15px 0;
        margin-bottom: 6px;
    }
</style>